<template>
	<view class="content">
		<view class="search">
			<!-- 绝对定位 不站位 -->
			<view class="search-input">搜索:目的地/酒店/景点/航班号</view>
			<a class="user" href="">
				<text>我的</text>
			</a>
		</view>
		<!-- 轮播图 -->
		<view class="focus">
			<image src="../../static/focus.jpg" mode="widthFix"></image>
		</view>
		<!-- 局部导航 -->
		<view class="localnav">
			<view class="nav">
				<a class="local-nav-icon-1" href="">
				</a>
				<text>景点玩乐</text>
			</view>
			<view class="nav">
				<a class="local-nav-icon-2" href=""></a>
				<text>景点玩乐</text>
			</view>
			<view class="nav">
				<a class="local-nav-icon-3" href=""></a>
				<text>景点玩乐</text>
			</view>
			<view class="nav">
				<a class="local-nav-icon-4"></a>
				<text>景点玩乐</text>
			</view>
			<view class="nav">
				<a class="local-nav-icon-5" href=""></a>
				<text>景点玩乐</text>
			</view>
		</view>
		
		<view class="main-nav">
			<view class="nav-common">
				<view class="nav-items">
					<a  href="#">海外酒店</a>
				</view>
				<view class="nav-items">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</view>
				<view class="nav-items">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</view>
			</view>
			<view class="nav-common">
				<view class="nav-items">
					<a href="#">海外酒店</a>
				</view>
				<view class="nav-items">
					<a href="#">海外酒店</a>
					<a  href="#">特价酒店</a>
				</view>
				<view class="nav-items">
					<a  href="#">海外酒店</a>
					<a  href="#">特价酒店</a>
				</view>
			</view>
			<view class="nav-common">
				<view class="nav-items">
					<a href="#">海外酒店</a>
				</view>
				<view class="nav-items">
					<a href="#">海外酒店</a>
					<a  href="#">特价酒店</a>
				</view>
				<view class="nav-items">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</view>
			</view>
		</view>
		
		<!-- 侧导航栏 -->
		<view>
			<view class="subnav-entry">
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
				<a href="#">
					<span class="subnav-entry-icon"></span>
					<text>电话费</text></a>
			</view>
		</view>
		
		<view class="sales-box">
			<view class="sales-hd">
				<h2>热门活动</h2>
				<a href="#">获取更多福利</a>
			</view>
			<view class="sales-bd">
				<view class="row">
					<a href="#">
						<image src="../../static/pic1.jpg" mode="widthFix"></image>
					</a>
					<a href="#">
						<image src="../../static/pic2.jpg" mode="widthFix"></image>
					</a>
				</view>
				<view class="row">
					<a href="#">
						<image src="../../static/pic3.jpg" mode="widthFix"></image>
					</a>
					<a href="#">
						<image src="../../static/pic4.jpg" mode="widthFix"></image>
					</a>
				</view>
				<view class="row">
					<a href="#">
						<image src="../../static/pic5.jpg" mode="widthFix"></image>
					</a>
					<a href="#">
						<image src="../../static/pic6.jpg" mode="widthFix"></image>
					</a>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	
	a{
		text-decoration: none;
	}
	
	view{
		box-sizing: border-box;
	}
	
	.sales-box{
		border-top: 1px solid #CCC;
		background-color: #FFFFFF;
		margin: 4px;
		
		.sales-bd{
			.row{
				display: flex;
				a{
					border-bottom: 1px solid #C0C0C0;
					flex: 1;
					image{
						width: 100%;
					}
				}
				
				a:nth-child(1){
					border-right: 1px solid #C0C0C0;
				}
			}
		}
		
		.sales-hd{
			height: 32px;
			border-bottom: 1px solid #CCC;
			position: relative;
			h2{
				position: relative;
				text-indent: -999px;
				overflow: hidden;
			}
			
			h2::after{
				position: absolute;
				top: 8px;
				left: 5px;
				content: "";
				width: 79px;
				height: 15px;
				background-color: pink;
				background: url(../../static/hot.png) no-repeat 0 -20px;
				background-size: 79px auto;
			}
			
			a{
				font-size: 12rpx;
				color: #FFFFFF;
				position: absolute;
				right: 5px;
				top: 4px;
				background: -webkit-linear-gradient(left,#FF506C,#ff6bc6);
				border-radius: 8px;
				padding: 3px 20px 3px 10px;
			}
			
			a::after{
				content: "";
				position: absolute;
				top: 8px;
				right: 9px;
				width: 7px;
				height: 7px;
				border-top: 2px solid #C0C0C0;
				border-right: 2px solid #C0C0C0;
				transform: rotate(45deg);
			}
		}
	}
	
	// subnav-entry
	.subnav-entry{
		display: flex;
		border-radius: 8px;
		background-color: #FFFFFF;
		flex-wrap: wrap;
		margin: 0 4px;
		padding: 5px;
		a{
			// flex可以写百分比
			flex: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.subnav-entry-icon {
			width: 28px;
			height: 28px;
			background-color: pink;
			margin-top: 4px;
			background: url(../../static/subnav-bg.png) no-repeat;
			background-size: 28px auto;
		}
	}
	
	.search{
		display: flex;
		/* 固定跟父及无关,只跟页面有关 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		background-color: #F6F6F6;
		border-top: 1ps solid #ccc;
		border-bottom: 1ps solid #ccc;
		
		.search-input{
			position: relative;
			font-size: 12px;
			color: #666;
			line-height: 24px;
			padding-left: 25px;
			height: 46rpx;
			border: 1rpx solid black;
			flex: 1;
			justify-content: center;
			margin: 10px 6px;
			border-radius: 5px;
			box-shadow: 0 2px 4px blue($color: #000000);
		}
		
		.search-input::before{
			content: "";
			// display: block;
			// <!-- 绝对定位 不站位 -->
			position: absolute;
			top: 4px;
			left: 5px;
			width: 15px;
			height: 15px;
			background: url(../../static/sprite.png) no-repeat -59px -279px;
			background-size: 104px auto;
		}
		
		.user{
			width: 44px;
			font-size: 12rpx;
			text-align: center;
			color: #2eaae0;
		}
		
		.user::before{
			content: "";
			display: block;
			width: 23px;
			height: 23px;
			background: url(../../static/sprite.png) no-repeat -59px -194px;
			background-size: 104px auto;
			margin: 5px auto 0;
		}
	}
	
	.focus{
		padding-top: 44px;
		height: 100px;
	}
	.focus image{
		width: 100%;
	}
	
	.localnav{
		display: flex;
		height: 64px;
		background-color: white;
		margin: 3px 4px;
		border-radius: 3px;
		view{
			flex: 1;
		}
	}
	
	.nav{
		display: flex;
		flex-direction: column;
		//  侧周居中对齐
		align-items: center;
		font-size: 12rpx;
	}
	
	// 属性选择器
	.localnav .nav [class^="local-nav-icon"]{
		width: 32px;
		height: 32px;
		margin-top: 8px;
		background: url(../../static/localnav_bg.png) no-repeat 0 0;
		background-size: 32px auto;
	}
	
	.localnav .nav .local-nav-icon-2{
		background-position: 0 -32px;
	}
	
	.localnav .nav .local-nav-icon-3{
		background-position: 0 -64px;
	}
	
	.localnav .nav .local-nav-icon-4{
		background-position: 0 -96px;
	}
	
	.localnav .nav .local-nav-icon-5{
		background-position: 0 -128px;
	}
	
	
	.main-nav{
		overflow: hidden;
		border-radius: 8px;
		margin: 0 4px 3px;
		.nav-common{
			display: flex;
			height: 68px;
			background-color: pink;
			.nav-items{
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.nav-items a{
				flex: 1;
				line-height: 34px;
				text-align: center;
				color: #FFFFFF;
				font-size: 14rpx;
				// 文字阴影
				text-shadow: 1px 1px rgba(0,0,0,.2);
			}
			
			.nav-items a:nth-child(1){
				border-bottom: 1px solid #FFFFFF;
			}
			
			.nav-items:nth-child(1) a {
				border: 0px;
				background: url(../../static/hotel.png) no-repeat bottom center;
				background-size: 121px auto;
			}
			
			.nav-items:nth-child(-n+2){
				border-right: 1px solid #FFFFFF;
			}
		}
		
		.nav-common:nth-child(1){
			background: -webkit-linear-gradient(left,#FA5A55,#FA994d);
		}
		
		.nav-common:nth-child(2){
			margin: 3px 0;
			background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
		}
		
		.nav-common:nth-child(3){
			background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
		}
	}

</style>
